<template>
  <div class="score-container">
    <div class="sidebar">
      <SideBar />
    </div>
    <div class="score-inner-container">
      <div class="live-wrapper">
        <div class="top">
          <MatchList />
        </div>
        <div class="list">
          <div class="tab">
            <button
              class="button"
              :class="{ active: activeButton === 'instant' }"
              @click="setActive('instant')"
            >
              全部
            </button>
          </div>
          <div class="match-cards">
            <div
              class="match-card"
              v-for="(match, index) in list"
              :key="index"
              @click="() => goLive(match)"
            >
              <div class="match-image">
                <!-- <img
                  :src="match.liveImage"
                  data-load="false"
                  @load="loadImage"
                  @error="loadImage":fallback=""
                  class="cover"
                /> -->
                <img v-lazy="match.liveImage" data-load="false" class="cover" />
                <!-- <a-image :src="match.liveImage" :fallback="errorImg" class="cover" /> -->
                <div class="match-info">
                  <h3>{{ match.title }}</h3>
                  <div class="streamer-info">
                    <img :src="match.headImageUrl" alt="Streamer avatar" class="avatar" />
                    <span class="streamer-name">{{ match.nickName }}</span>
                    <span class="views">{{ formatViews(match.hotCount) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <Pagination
            v-model:current="current"
            :total="total"
            show-less-items
            @change="paginationHandle"
            :showSizeChanger="false"
            :defaultPageSize="50"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import MatchList from './match-list.vue'
import { getLiveList } from '@/api/live'
import { decryptImageData } from '@/utils/utils'
import { useRouter } from 'vue-router'
import { Pagination } from 'ant-design-vue'
import SideBar from '@/components/sideBar.vue'
// import errorImg from '@/assets/imgs/errorimg.png'

const list = ref([])
const router = useRouter()
const current = ref(1)
const pageRef = ref(1)
const total = ref(10)
const formatViews = (views) => {
  if (views >= 10000) {
    const formattedViews = (views / 10000).toFixed(1)
    return `${formattedViews}w`
  }
  return views.toString()
}
const getData = async () => {
  try {
    const res = await getLiveList({
      liveGroupId: null,
      page: pageRef.value,
      size: 50
    })
    console.log(res, 'res')
    list.value = res.data.list
    total.value = res.data.total
    setTimeout(() => {
      window.scrollTo({
        top: 0
      })
    })
  } catch (error) {
    console.log(error, 'error')
  }
}

const goLive = (match) => {
  router.push({
    path: `/live/${match.roomId}`
  })
}
onMounted(() => {
  getData()
})
const loadImage = async (event) => {
  // let url = 'your_url_here' // 这里替换为你的 URL
  // console.log(event, 'loadImage')
  try {
    const load = event.target.getAttribute('data-load')
    if (load === 'false') {
      const data = await decryptImageData(event.target.currentSrc)
      event.target.src = data
      event.target.setAttribute('data-load', 'true')
    }
  } catch (error) {
    // console.error('Error fetching data:', error)
  }
}

const paginationHandle = (page, pageSize) => {
  console.log(page, pageSize)
  pageRef.value = page
  getData()
}
</script>
<style lang="scss" scoped>
.top {
  min-height: 150px;
}
.score-container {
  height: 100%;
  width: 100vw;
  overflow: hidden;

  min-width: 1100px;
  background: #f5f7ff;
  .score-inner-container {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow: scroll;
    .live-wrapper {
      min-width: 1100px;
      max-width: 1400px;
      margin: 0 auto;
    }
  }
}
.list {
  .tab {
    display: flex;
    //   justify-content: space-around;
    //   padding: 10px;
    //   background-color: #f5f5f5;
    margin-bottom: 20px;
    margin-top: 20px;

    .button {
      width: 64px; /* 根据需要调整按钮大小 */
      height: 36px; /* 根据需要调整按钮大小 */
      border: none;
      border-radius: 20px;
      //   background-size: cover;
      cursor: pointer;
      background: url('@/assets/icons/score_status_btn.webp') no-repeat;
      background-size: 100% 100%;
      margin-right: 20px;
      font-weight: 500;
      font-size: 14px;
      color: #525a79;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
      border-radius: 20px 20px 20px 20px;
    }

    .button.active {
      background: url('@/assets/icons/score_status_btn_active.webp') no-repeat;
      box-shadow: 0px 0px 10px rgba(31, 205, 44, 0.5);
      background-size: 100% 100%;
      color: #fff;
      /* 在需要时添加额外的选中样式 */
    }
  }
  .match-cards {
    display: flex;
    /* grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); */
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    min-height: calc(100vh - 100px);

    align-content: start;
  }

  .match-card {
    width: 264px;
    height: 226px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: url('@/assets/icons/home_live_item_bg.webp') no-repeat;
    background-size: 100% 100%;
    border: 1px solid transparent;
    &:hover {
      border-radius: 24px;
      // background: url('@/assets/icons/home_live_item_active_bg.webp') no-repeat;
      // background-size: 100% 100%;
      box-shadow: 0 0 10px rgba(0, 255, 10, 0.8);
      border: 1px solid rgba(0, 255, 10, 0.8);
      // border-image: linear-gradient(180deg, rgba(41, 226, 60, 1), rgba(31, 200, 59, 1)) 2 2;
    }
  }

  .match-image {
    width: 100%;
    height: 150px;
    //   background-size: cover;
    //   background-position: center;
    .cover {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
  }

  .match-info {
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    //   right: 0;
    padding: 10px;
    color: #525a79;
    //   background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    //   color: white;
    //   background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    h3 {
      margin: 0 0 5px;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .streamer-info {
    display: flex;
    align-items: center;
    font-size: 14px;

    .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 5px;
    }

    .views {
      margin-left: auto;
      color: #ff6b6b;
    }
  }
}
.pagination {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
